// 全局注册统一组件
// 导入骨架插件
import XtxSkeleton from "@/components/skeleton/index.vue";
import XtxCarousel from "@/components/carousel/index.vue";
import XtxMore from "@/components/more/index.vue";
import { App } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
import defaultImg from "@/assets/images/200.png";
import Bread from "./Bread/index.vue";
import BreadItem from "./Bread/item.vue";
import City from "./city/index.vue";
import NumBox from "./numbox/index.vue";
import Button from "./button/index.vue";
import CheckBox from "./checkbox/index.vue";
import Message from "./message/message.vue";

export default {
  install(app: App) {
    app.component("XtxSkeleton", XtxSkeleton);
    app.component(XtxCarousel.name, XtxCarousel);
    app.component(XtxMore.name, XtxMore);
    app.component("XtxBread", Bread);
    app.component("XtxBreadItem", BreadItem);
    app.component("XtxCity", City);
    app.component("XtxNumBox", NumBox);
    app.component("XtxButton", Button);
    app.component("XtxCheckBox", CheckBox);
    app.component("XtxMessage", Message);

    // 自定义指令
    app.directive("lazy", {
      mounted(el: HTMLImageElement, { value }) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            stop();
            el.src = value;
            el.onerror = function () {
              el.src = defaultImg;
            };
          }
        });
      },
    });
  },
};
